import React, {Component} from 'react'
import {connect} from 'react-redux'
import {InterfaceModeWrapper} from './styled.js'
import Interface from './Interface'
import {Card } from 'antd'
import {actionFunc} from './store'


class InterfaceMode extends Component {
    render() {
        const {wanCount} = this.props
        return (
            <InterfaceModeWrapper>
                <Card title='Double Wan Interface Set' className='interface'>
                    <div className="interface-wrapper">
                        <Interface name='WAN0' imgClass='wan-icon'/>
                        {
                            wanCount === 2 ? (
                                <Interface status={true} wanCount={wanCount} name='WAN1' imgClass='wan-icon' className='dashed'/>
                            ) : (
                                <Interface status={true}  wanCount={wanCount} name='LAN0' imgClass='lan-icon' className='dashed'/>
                            )
                        }
                        <Interface name='LAN1' imgClass='lan-icon'/>
                        <Interface name='LAN2' imgClass='lan-icon'/>
                        <Interface name='LAN3' imgClass='lan-icon'/>
                    </div>
                </Card>
            </InterfaceModeWrapper>
        )
    }
    componentDidMount() {
        this.props.requestList()
    }
}

const mapState = (state) => ({
    wanCount: state.getIn(['interfaceMode','wanCount'])
})
const mapDispatch = (dispatch) => ({
    requestList(){
        dispatch(actionFunc.requestList())
    }
})

export default connect(mapState, mapDispatch)(InterfaceMode)
